<template>
  <div class="moneyList">
    <div class="top">
      <div class="time pad">
        <span class="label">行业类型：</span>
        <el-cascader v-model="filter.shopTypeId" :options="shopType" :show-all-levels="false" @change="handleshopType"
          placeholder="请选择"></el-cascader>
      </div>
      <div class="time pad">
        <span class="label">管辖区域：</span>
        <el-select v-model="filter.areaId" filterable placeholder="请选择">
          <el-option v-for="item in optionsArea" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="lef_box">
          <el-button size="small" type="primary" @click="add">新建</el-button>
        </div>
        <!-- <export-excel-button
          title="资金账户管理表"
          action="/entry/v1/fund/merchantFundAccountExport"
          :params="ExportParams"
        /> -->
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:childName="{ scope }">
          <p :class="[formatting(scope.row.creditRisks)]">{{scope.row.childName}}</p>
        </template>
        <template v-slot:safetyFactor="{ scope }">
          <p :class="[formatting(scope.row.creditRisks)]">{{scope.row.safetyFactor}}</p>
        </template>
        <template v-slot:creditRisks="{ scope }">
          <p :class="[formatting(scope.row.creditRisks)]">{{scope.row.creditRisks}}</p>
        </template>
        <template v-slot:depositRatio="{ scope }">
          <p :class="[formatting(scope.row.creditRisks)]">{{scope.row.depositRatio}}</p>
        </template>
        <template v-slot:ReleaseRatio="{ scope }">
          <!-- <p :class="[formatting(scope.row.creditRisks)]">每消耗{{scope.row.initReleaseRatio}}%，释放一次</p> -->
          <p :class="[formatting(scope.row.creditRisks)]">每消耗{{scope.row.maxReleaseRatio}}%，全部释放</p>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row)" size="small" type="primary">修改</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog v-if="detailDialog" :id="id" :path="path" :visible.sync="detailDialog" @success="_handleSuccess" />
  </div>
</template>
<script>
  import DetailDialog from './components/DetailDialog'
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import {
    getdepositList,
    getqueryStpeStatus,
    deleteList,
    getShopTypeList,
  } from '@/api/moneyManagement'
  import {
    areaList
  } from "@/api/common";
  // mixins
  import handlePageMixin from '@/mixins/handlePageMixin'
  export default {
    name: 'moneyList',
    components: {
      DetailDialog,
      ExportExcelButton,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        shopType: [],
        type: [
          {
            id: '',
            value: '全部'
          },
          {
            id: '1',
            value: '等待创建'
          },
          {
            id: '2',
            value: '创建失败'
          },
          {
            id: '3',
            value: '创建成功'
          },
        ],
        tableColumn: [
           {
            prop: "areaName",
            label: "管辖区域",
            width:'130'
          },
          {
            prop: 'parentName',
            label: '行业',
            width: '100'
          },
          {
            slot: true,
            slotName: "childName",
            label: "子行业",
          },
          {
            slot: true,
            slotName: "safetyFactor",
            label: "融安e信安全系数",
            width: '140'
          },
          {
            slot: true,
            slotName: "creditRisks",
            label: "商家信用风险",
            width: '120'
          },
          {
            slot: true,
            slotName: "depositRatio",
            label: "基准存管比例",
            width: '120'
          },
          {
            slot: true,
            slotName: "ReleaseRatio",
            label: "动态释放规则",
            width: '200'
          },
          {
            label: '操作',
            slot: true,
            slotName: 'operate',
            width: '180',
            fixed: 'right',
          }
        ],
        tableData: [],
        TimeArr: [],
        filter: {
          shopTypeId: '', //商户ID
          areaId:'',//区域Id
        },
        value: '',
        time: '',
        currentNavtab: 0,
        detailDialog: false,
        id: '',
        optionsArea:[],
      }
    },
    computed: {
      ExportParams() {
        const {
          id: ticketId
        } = this;
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        return params;
      },
    },
    created() {
      this.getAreaList()
      this.getList()
      this.getShopTypeList()
    },
    methods: {
      getAreaList() { //查询区域下拉框
        areaList().then(res => {
          this.optionsArea = res.result
        }).catch(() => {})
      },
      //获取店铺类型
      getShopTypeList() {
        this.loading = true
        const params = {}
        getShopTypeList(params).then(res => {
          let ls = []
          ls = this.getTreeData(res.result);
          let ls1 = ls.map(item => {
            item.value = item.id
            item.children.map(items => {
              items.value = items.id

            })
            return item
          })
          this.shopType = ls1

        }).finally(() => {
          this.loading = false
        })
      },
      getTreeData(data) {
        // 循环遍历json数据
        for (var i = 0; i < data.length; i++) {
          if (data[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            // data[i].children=undefined;
            delete data[i].children;
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
      //搜索值变化
      handleshopType(val) {
        this.filter.shopTypeId = val[1]
      },
      //列表
      getList() {
        this.loading = true
        const params = {
          ...this.pageOptions,
          ...this.filter
        }
        getdepositList(params).then(res => {
          const {
            total,
            records
          } = res.result
          this.$refs.table.pageOptions.total = total
          this.tableData = records
        }).finally(() => {
          this.loading = false
        })
      },
      //获取时间
      getTimeArr(value) {
        console.log("time", value)
        this.filter.createStartTime = this.TimeArr[0]
        this.filter.createEndTime = this.TimeArr[1]
      },

      //重置
      setReset() {
        this.filter.areaId = ''
        this.filter.shopTypeId = ''
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList()
      },
      //搜索
      search() {
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList()
      },
      //新建
      add() {
        this.detailDialog = true
        this.path = 'add'
      },
      //查看
      lookDetail(data) {
        this.id = data.id
        this.path = 'edit'
        this.detailDialog = true
      },
      formatting(data) {
        if (data == '高') {
          return 'red'
        } else if (data == '中') {
          return 'yellow'
        } else if (data == '低') {
          return 'green'
        }
      },
      _handleSuccess() {
        console.log('1111111111111111111')
        this.getList()
      },
    }
  }

</script>
<style lang="scss" scoped>
  .moneyList {
    padding: 20px;

    .top {
      display: flex;
      justify-content: flex-start;
      padding: 20px;
      background: #fff;
      border-radius: 4px;

      .pad {
        padding-right: 24px;
      }

      .time {
        .label {
          font-size: 14px;
          color: #606266;
        }

      }
    }

    .main {
      margin-top: 15px;
      padding: 20px;
      background: #fff;
      border-radius: 4px;
    }

    .main_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;
      font-size: 14px;
      color: #333;
    }
  }

  .time ::v-deep .el-input {
    width: 200px;
  }

  .el-select .el-input {
    width: 130px;
  }

  .first_box {
    ::v-deep :nth-child(1).el-input__inner {
      width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
      width: 200px;
    }
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .green {
    color: #11b95c;
  }

  .red {
    color: #e64242;
  }

  .yellow {
    color: #e6a700;
  }

</style>
